<template>
  <ul>
    <li v-for="i in getlist" :key="i.id">
      <div>
        <span>标题</span>
        <el-input v-model="i.title" style="width: 240px" placeholder="请输入标题" />
      </div>
      <div>
        <span>内容</span>
        <el-input v-model="i.content" style="width: 240px" placeholder="请输入内容" />
      </div>
      <el-switch v-model="i.status" inactive-text="是否公开" />
      <div>
        <el-button type="primary" @click="xiugai1(i.id)">
          修改
        </el-button>
        <el-button type="warning" @click="delete1(i.id)">删除</el-button>
      </div>
    </li>
  </ul>
  <el-dialog v-model="dialogFormVisible" title="文章发布" width="500">
    <el-form :model="form">
      <el-form-item label="标题：" :label-width="formLabelWidth">
        <el-input v-model="title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容：" :label-width="formLabelWidth">
        <el-input v-model="content" autocomplete="off" />
      </el-form-item>
      <el-switch v-model="status" inactive-text="是否公开" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="xiugai2()">修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { WenzhangDeleteRequset, WenzhanglistRequset, WenzhangPatchRequset } from '@/api/user';
import { ref, reactive } from 'vue'
const pid = ref(0)
const dialogFormVisible = ref(false)
const getlist = ref([{ id: '', title: '', content: '', status: false },])
const title = ref('')
const content = ref('')
const status = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
async function getlist1() {
  const res = await WenzhanglistRequset()
  console.log(res);
  getlist.value = res.data
}
getlist1();
function xiugai1(id: number) {
  pid.value = id;
  dialogFormVisible.value = true;
}
async function xiugai2() {
  await WenzhangPatchRequset(pid.value, title.value, content.value, status.value,)
    .then((res) => {
      if (res.status == 200) {
        alert('修改成功')
        dialogFormVisible.value = false;
        getlist1()
        console.log(res);
      }
    })
}
async function delete1(id: number) {
  await WenzhangDeleteRequset(id)
    .then((res) => {
      if (res.status == 200) {
        alert('删除成功')
        getlist1()
        console.log(res);
      }
    })
 }
</script>
<style lang="css" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

li {
  width: 100%;
  height: 100%;
  border-bottom: #6b778c 1px solid;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
